
<template>
  <div>
    <video ref="video" autoplay></video>
    <button @click="takePhoto">拍照</button>
    <canvas ref="canvas" style="display: none;"></canvas>
    <img v-if="videoImg" :src="videoImg" alt="Photo" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoImg: ""
    }
  },
  methods: {
    takePhoto() {
      const video = this.$refs.video;
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext("2d");


      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

      this.videoImg = canvas.toDataURL("image/png");
    },
  },
  watch: {},
  mounted() {
    this.$nextTick(() => {
      console.log("大厦肯定会", navigator.mediaDevices)
      navigator.mediaDevices.getUserMedia({ video: true })
        .then((stream) => {
          this.$refs.video.srcObject = stream;
        })
        .catch((error) => {
          console.error("摄像头访问失败:", error);
        });   
    });
  },
};
</script>
